@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

body {
  font-family: 'Segoe UI', 'Segoe UI Midlevel', 'Segoe WP', Roboto, Helvetica,
    Arial, Sans-Serif;

  button,
  input,
  .MuiInputBase-root,
  textarea {
    font-family: 'Segoe UI', 'Segoe UI Midlevel', 'Segoe WP', Roboto, Helvetica,
      Arial, Sans-Serif;
  }

  button {
    padding: 4px 14px;
    background: #e8e8e8;
    border-radius: 4px;

    // &:hover {
    //   background: #f3f3f3;
    // }
  }
}

#__next {
  height: 100%;
}

.config-center-app {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.my-component-test {
  border: 11px solid coral;
  /* background-color: var(--nextui-primary-500); */
  background-color: hsl(var(--nextui-success));
}

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes loadingAnim {
  0% {
    width: 0%;
  }

  100% {
    width: 96%;
  }
}

.preload {
  animation-name: loadingAnim;
  animation-duration: 5s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
}

.loading-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  padding: 0;
  line-height: 0;

  &.loading-wrapper-inner {
    position: absolute;
  }

  .loading-mask-background {
    position: absolute;
    inset: 0;
    z-index: 9990;
    display: block;
    background: rgba(255, 255, 255, 0.05);
  }

  .loading-container {
    position: relative;
  }

  .loading-animation {
    // =================================================================================================
    &.loading-animation-style-1 {
      .loader {
        display: block;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        position: relative;
        animation: style-1-rotate 1s linear infinite;
      }

      .loader::before,
      .loader::after {
        content: '';
        box-sizing: border-box;
        position: absolute;
        inset: 0px;
        border-radius: 50%;
        border: 3px solid #942ffb;
        animation: style-1-prixClipFix 2s linear infinite;
      }

      .loader::after {
        border-color: #3b1364;
        animation:
          style-1-prixClipFix 2s linear infinite,
          style-1-rotate 0.5s linear infinite reverse;
        inset: 6px;
      }
    }
    // =================================================================================================
    &.loading-animation-style-2 {
      .loader {
        display: block;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        position: relative;
        animation: style-1-rotate 1s linear infinite;
      }

      .loader::before {
        content: '';
        box-sizing: border-box;
        position: absolute;
        inset: 0px;
        border-radius: 50%;
        border: 3px solid #942ffb;
        animation: style-1-prixClipFix 2s linear infinite;
      }
    }
    // =================================================================================================
    &.loading-animation-style-3 {
      .loader {
        box-sizing: border-box;
        display: inline-block;
        width: 50px;
        height: 80px;
        border-top: 5px solid #3b1364;
        border-bottom: 5px solid #3b1364;
        position: relative;
        background: linear-gradient(#942ffb 30px, transparent 0) no-repeat;
        background-size: 2px 40px;
        background-position: 50% 0px;
        animation: spinx 5s linear infinite;
      }

      .loader:before,
      .loader:after {
        content: '';
        width: 40px;
        left: 50%;
        height: 35px;
        position: absolute;
        top: 0;
        transform: translatex(-50%);
        background: rgba(88, 55, 222, 0.2);
        border-radius: 0 0 20px 20px;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: 0 0px;
        animation: lqt 5s linear infinite;
      }

      .loader:after {
        top: auto;
        bottom: 0;
        border-radius: 20px 20px 0 0;
        animation: lqb 5s linear infinite;
      }
    }
    // =================================================================================================
    &.loading-animation-style-4 {
      .loader {
        width: 48px;
        height: 48px;
        border: 2px solid;
        border-color: #942ffb transparent;
        border-radius: 50%;
        display: inline-block;
        box-sizing: border-box;
        animation: rotation 1s linear infinite;
      }
    }
    // =================================================================================================
    &.loading-animation-style-5 {
      .loader {
        font-size: 20px;
        display: inline-block;
        font-family: Arial, Helvetica, sans-serif;
        // font-family: 'Courier New', 'Times New Roman';
        font-weight: bold;
        color: #942ffb;
        letter-spacing: 2px;
        position: relative;
        height: 20px;
        line-height: 20px;
        text-shadow:
          1px 1px 0 rgba(255, 255, 255, 0.6),
          -1px -1px 0 rgba(255, 255, 255, 0.6),
          1px -1px 0 rgba(255, 255, 255, 0.6),
          -1px 1px 0 rgba(255, 255, 255, 0.6),
          0 0 6px rgba(0, 0, 0, 0.4);
      }
      .loader::before {
        content: ' ';
        position: absolute;
        bottom: 120%;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 36px;
        background: url(/static/images/logo.png);
        background-size: 100% auto;
        // box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
        filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
      }
      .loader::after {
        content: 'Loading...';
        position: absolute;
        left: 0;
        top: 0;
        color: #3b1364;
        width: 100%;
        height: 100%;
        overflow: hidden;
        box-sizing: border-box;
        animation: animloader5 2s ease-in infinite;
      }
    }
    // =================================================================================================
    &.loading-animation-style-6 {
      .loader {
        display: inline-block;
        width: 50px;
        aspect-ratio: 1;
        border-radius: 50%;
        border: 2px solid #00000000;
        border-right-color: #942ffbcc;
        position: relative;
        animation: animloader6 1s infinite linear;
      }
      .loader:before,
      .loader:after {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: 50%;
        border: inherit;
        animation: inherit;
        animation-duration: 1.8s;
      }
      .loader:after {
        animation-duration: 3.7s;
      }
      .loader-logo {
        position: absolute;
        bottom: 8%;
        left: 52%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
        background: url(/static/images/logo.png);
        background-size: 100% auto;
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
        opacity: 0.8;
      }
    }
    // =================================================================================================
  }
}

// .hide {
//   display: none !important;
// }

@keyframes style-1-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes style-1-prixClipFix {
  0% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
  }

  25% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
  }

  50% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
  }

  75% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  }

  100% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
}

@keyframes lqt {
  0%,
  100% {
    background-image: linear-gradient(#942ffb 40px, transparent 0);
    background-position: 0% 0px;
  }

  50% {
    background-image: linear-gradient(#942ffb 40px, transparent 0);
    background-position: 0% 40px;
  }

  50.1% {
    background-image: linear-gradient(#942ffb 40px, transparent 0);
    background-position: 0% -40px;
  }
}

@keyframes lqb {
  0% {
    background-image: linear-gradient(#942ffb 40px, transparent 0);
    background-position: 0 40px;
  }

  100% {
    background-image: linear-gradient(#942ffb 40px, transparent 0);
    background-position: 0 -40px;
  }
}

@keyframes spinx {
  0%,
  49% {
    transform: rotate(0deg);
    background-position: 50% 36px;
  }

  51%,
  98% {
    transform: rotate(180deg);
    background-position: 50% 4px;
  }

  100% {
    transform: rotate(360deg);
    background-position: 50% 36px;
  }
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animloader5 {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes animloader6 {
  100% {
    transform: rotate(1turn);
  }
}

.toast-animation {
  top: 0%;
  opacity: 0;
  animation: toastSlideDown 0.2s forwards;
  animation-timing-function: ease-out;
}
@keyframes toastSlideDown {
  75% {
    top: 9%;
    opacity: 0.6;
  }
  100% {
    top: 8%;
    opacity: 1;
  }
}
